const { merge } = require("webpack-merge")
const path = require("path")
const baseConfig = require("./webpack.config.base")
const buildConfig = require("./webpack.build")
const webpack = require("webpack")
const theme = require("./theme"); //引入antd主题修改
const ESLintPlugin = require('eslint-webpack-plugin')
const config = {
  module: {
    rules: [
      {
        test: /\.css$/,
        // include: path.resolve(__dirname, "./src"),
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 1,
              // modules: {
              //   localIdentName: "[local]--[hash:base64:5]"
              // }
            }
          },
          {
            loader: "postcss-loader"
          }
        ]
      },
      {
        test: /\.less$/,
        // include: path.resolve(__dirname, "./src"),
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 1,
              // modules: {
              //   localIdentName: "[local]--[hash:base64:5]"
              // }
            }
          },
          {
            loader: "postcss-loader"
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled:true,
                modifyVars: theme,
              }
              // javascriptEnabled: true,
            }
          }
        ]
      },
    ]
  },
  stats: {
    // all: 'normal',
    builtAt: true,
    // assets = true,
    cachedModules: true,
    runtimeModules: true,
    groupReasonsByOrigin: true,
    cachedAssets: false,
    chunks: false,
    colors: true,
    errors: true,
    modules: false,
    excludeAssets: asset => {
      return (
        asset.lastIndexOf(".js") !== asset.length - 3 &&
        asset.lastIndexOf(".css") !== asset.length - 4 &&
        asset.lastIndexOf(".html") !== asset.length - 5
      );
    }
  },
  // stats: {
  //   colors: true,
  //   modules: false,
  //   children: false,
  //   excludeAssets: asset => {
  //     return (
  //       asset.lastIndexOf(".js") !== asset.length - 3 &&
  //       asset.lastIndexOf(".css") !== asset.length - 4 &&
  //       asset.lastIndexOf(".html") !== asset.length - 5
  //     );
  //   }
  // },
  // devtool: "source-map", //导出sourceMap文件（sourceMap文件的作用是使我们在网页查看代码时为我们的书写格式， 而不是webpack打包之后的格式）不可用于生产模式
  devtool: "eval-source-map",
  devServer: {
    hot: true,
    static: {
      directory: path.join(__dirname, 'public'),
    },
    //webpack5将open和openPage合并为open，默认路径为true即可  也可传入一个字符串， 传入数组则全部打开浏览器新页面
    open: ['main.html#/logon'],
    client: { //当有编译错误或者警告的时候显示一个全屏overlay
      overlay: {
        errors: true,
        warnings: false,
      },
      // webSocketURL: {
      //   hostname: "0.0.0.0"
      // }
    },
    compress: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
      },
    },
    port: buildConfig.devPort,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),//使用hmr的时候，需要满足两个条件： 1.配置devServer.hot为true 2.配置webpack.
    new webpack.NoEmitOnErrorsPlugin(), //暂时用途不详，类似于try catch  遇见错误不停止代码
    new ESLintPlugin({
      fix: true,
      extensions: ['js', 'json', 'ts', "tsx"],
      exclude: '/node_modules/'
    })
  ]
}
module.exports = merge(baseConfig, config)
